<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="wrap">
    <h2>层级关系</h2>
    <div class="list">
      <li class="first">01</li>
      <li>02</li>
      <li class="mid">03</li>
      <li>04</li>
      <li>05</li>
      <li class="last">06</li>
      <!-- <li>07</li> -->
    </div>
  </div>
</body>
<script>
  // 层级关系
  // 父节点  
  // 子节点/子元素
  // 同胞节点

  var list = document.getElementsByClassName("list")[0];
  var first = document.getElementsByClassName("first")[0];
  var mid = document.getElementsByClassName("mid")[0];
  var last = document.getElementsByClassName("last")[0];
  console.log(list);

  // 子节点/子元素
  // Element.childNodes   子节点(文本节点,元素节点,注释节点)
  // Element.children     子元素(元素节点)

  var childNodes = list.childNodes;
  console.log(childNodes);

  var children = list.children;
  console.log(children);

  // 第一个子节点/第一个子元素
  // Element.firstChild                 第一个子节点
  // Element.firstElementChild          第一个子元素
  console.log(list.firstChild);          // childNodes[0]
  console.log(list.firstElementChild);   //  children[0]


  // 最后一个子节点/最后一个子元素
  // Element.lastChild                 最后一个子节点
  // Element.lastElementChild          最后一个子元素
  console.log(list.lastChild);         // childNodes[childNodes.length-1]
  console.log(list.lastElementChild);  // children[childNodes.length-1]


  // 父节点/父元素    => 父节点 === 父元素
  // Element.parentNode        父节点
  // Element.parentElement     父元素

  // console.log(list.parentNode);
  // console.log(list.parentElement);

  // 同胞节点/同级元素

  // previous 先前的 早先 在...之前
  // Sibling  同胞 兄弟姐妹

  // 前一个同胞节点 / 前一个同级元素
  // Element.previousSibling         前一个同胞节点
  // Element.previousElementSibling  前一个同级元素
  console.log(mid.previousSibling);
  console.log(mid.previousElementSibling);

  // 后一个同胞节点 / 后一个同级元素
  // Element.nextSibling         后一个同胞节点
  // Element.nextElementSibling  后一个同级元素
  console.log(mid.nextSibling);
  console.log(mid.nextElementSibling);



</script>

</html>